﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/jXSockets.1.0.6.beta.js" type="text/javascript"></script>
    <script src="/Scripts/jXSockets.peerConnection.beta.1.0.js" type="text/javascript"></script>
    <script src="/Scripts/bootstrap.min.js" type="text/javascript"></script>
    <!-- Le styles -->
    <link href="/Content/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        body
        {
            padding-top: 60px;
            padding-bottom: 40px;
        }
        #remoteVideo video
        {
            width: 100%;
        }        
        .busy
        {
            color: #eee;            
        
        }
        
        footer {
            background: #eee;
            color: #fff;
            height: 120px;
            border-top: 1px solid #000;
        }
    </style>
    <link href="/Content/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type="text/javascript">
        var rtc = null;
        var peer = null;
        var localVideo = null;

        // Simple <audio> player
        var Player = function (audioElement) {
            var audio = document.getElementById(audioElement);
            this.play = function () {
            audio.play();
            };
            this.stop = function () {
                audio.pause();
                audio.currentTime = 0;
            };
            return this;
        } ;


        $(function () {

            $("#hangup").hide();


            $("#nickname").val(localStorage.getItem("nick") == null ? "John Doe" : localStorage.getItem("nick"));
            var ringing = new Player("ringtone");
            localVideo = $("#localVideo").get(0);
            
            
            
            rtc = new XSocketsWebRtc("STUN stun1.l.google.com:19302", "ws://your-xsockets-devserver-ip:4502/SignalingController"); // Change this ip localsystems IP ( Where the XSocketsServer is hosted )


            //            $("#hangup").hide().bind("click", function () {
            //                rtc.disconnect();
            //            });

            rtc.bind(rtc.Events.Incomming, function (msg) {
            });
            rtc.bind(rtc.Events.Outgoing, function (msg) {
            });
            rtc.bind("start", function (msg) {
                ringing.play();
                $("#modal-waiting").modal("show");
            });
            rtc.bind("talks", function (msg) {
                $.each(msg, function (index, peer) {
                    if (peer.Busy) {
                        $("[data-identity='" + peer.Identity + "']").addClass("busy");
                    } else {
                        $("[data-identity='" + peer.Identity + "']").removeClass("busy");
                    }
                });
            });

            rtc.bind(rtc.Events.Completed, function (msg) {
                ringing.stop();
                $("#modal-waiting").modal("hide");
                rtc.complete(msg);

            });

            // Triggered when a peerConnection is established 
            rtc.bind("remotestream", function (event) {
                
                var url = window.webkitURL.createObjectURL(event.stream);
                $("<video>").attr({
                    autoplay: "autoplay",
                    width: '100%',
                    src: url
                }).appendTo("#remoteVideo");
                $("#remoteSurface").fadeIn();
            });
            rtc.bind("error", function (err) {
                // todo:deal with the error (err)
            });
            // Access local device (audion,video)
            rtc.getUserMedia(function (url) {
                localVideo.src = url;
            });
            // Triggers when you are connected to the 'SignalController'
            rtc.bind("peercreated", function (msg) {
                peer = msg;
            });
            // Triggers when a new peer (client) is connected or disconnects
            rtc.bind("peerschanged", function (msg) {
                $("#numOfPeers").text(msg.Peers);
            });
            // Triggers when a new user is connected and initialized on the 'SignalController'
            rtc.bind("peerconnected", function (msg) {
                $("#peers").empty();
                $.each(msg, function () {
                    if (this.Identity !== self.Identity) {
                        $("<li><a href='#'></a>").find("a").attr("data-identity", this.Identity).text(this.NickName).prepend("<i>").end().find("i").addClass("icon-user").end().data("peer", this).on("click", function () {
                            var callTo = $(this).data("peer");

                            if ($(this).children("a").first().hasClass("busy")) return;
                            if (peer.Identity !== callTo.Identity) {
                                rtc.connect(peer.Identity, callTo.Identity);
                                ringing.play();
                                $("#modal-waiting").modal("show");
                            } else {
                                //todo: you cant call your self!
                            }
                        }).appendTo("#peers");
                    } else {
                        $("<li><a></a>").find("a").text(this.NickName + " ( you )").prepend("<i>").end().find("i").addClass("icon-user").end().data("peer", this).appendTo("#peers");
                    }
                });
            });
            $("#setNickName").bind("click", function (e) {
                e.preventDefault();
                peer.NickName = $("#nickname").val();
                rtc.Inititalize(peer);
                localStorage.setItem("nick", peer.NickName);
                $("#start").fadeOut(function () {
                    $("#hangout").fadeIn("slow");
                    $("#hangout").toggleClass("hidden");
                });
            });
        });
    </script>
</head>
    <body>
        
        @RenderBody()
    </body>
</html>
